<!DOCTYPE html>
<html>
    <head>
        <title>OrderList</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <!-- 所有的 css & js 资源 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="../../static/sa.css">
        <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
        <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
        <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
        <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
        <script src="../../static/sa.js"></script>
        <script src="../axios.min.js"></script>
        <style type="text/css">
            /* .data-table .el-table__body-wrapper{min-height: 0px; max-height: 0px;}
            .data-table .el-table__body-wrapper{transition: all 0.3s;} */
        </style>
    </head>
    <body>
        <div class="vue-box" style="display: none;" :style="'display: block;'">
            <div class=c-panel">
                <el-table class="data-table" ref="data-table" :data="dataList" size="small">
                    <el-table-column label="orderId" prop="orderId" > </el-table-column>
                    <el-table-column label="userId" prop="userId"></el-table-column>
                    <el-table-column label="status" prop="status" ></el-table-column>
                    <el-table-column label="time" prop="time" width="250px"></el-table-column>
                    <el-table-column label="items"  width="180px" >
                        <template slot-scope="s">
                            <el-button class="c-btn" type="success"  icon="el-icon-view" @click="getItems(s.row)">查看</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作 " >
                        <template slot-scope="s">
                            <el-button class="c-btn" type="primary" v-if="s.row.status === 'PAID'" @click="updateStatus(s.row)" >出货</el-button>
                            <el-button class="c-btn" type="primary" v-else-if="s.row.status === 'SHIPPED'" @click="updateStatus(s.row)" >送达</el-button>
                            <el-button class="c-btn" type="primary" v-else disabled>无操作</el-button>
<!--                            <el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <script>
            var mockData = {
                code: 200,
                msg: 'ok',
                data:[
                    {
                        "orderId":0,
                        "userId":999999999,
                        "status":"PAID",
                        "time":"yyyy-mm-dd hh-mm-ss",
                        "order_has_items": [
                                {
                                    "item": {
                                        "itemId": 35616167,
                                        "name": "所公叫前周自",
                                        "price": 58899.94,
                                        "description": "照花上层小动在强调直处收强已。律增科活表步系越世再参间片准空立。把民观事更小清广日流会千将还求形。热及满一社群斗带白国次历满。几精最什养商内石适儿王存东起术。",
                                        "imageDir": "http://dummyimage.com/200x100/4A7BF7&text=Hello",
                                        "storeId": 914832761,
                                        "amount": 52
                                    },
                                    "amount": 1000
                                }
                        ]
                    },
                    {
                        "orderId":7897987,
                        "userId":999999999,
                        "status":"SHIPPED",
                        "time":"yyyy-mm-dd hh-mm-ss",
                        "order_has_items": [
                            {
                                "item": {
                                    "itemId": 35616167,
                                    "name": "所公叫前周自",
                                    "price": 58899.94,
                                    "description": "照花上层小动在强调直处收强已。律增科活表步系越世再参间片准空立。把民观事更小清广日流会千将还求形。热及满一社群斗带白国次历满。几精最什养商内石适儿王存东起术。",
                                    "imageDir": "http://dummyimage.com/200x100/4A7BF7&text=Hello",
                                    "storeId": 914832761,
                                    "amount": 52
                                },
                                "amount": 1000
                            }
                        ]
                    },
                    {
                        "orderId":7897987,
                        "userId":999999999,
                        "status":"PAID",
                        "time":"yyyy-mm-dd hh-mm-ss",
                        "order_has_items": [
                            {
                                "item": {
                                    "itemId": 35616167,
                                    "name": "所公叫前周自",
                                    "price": 58899.94,
                                    "description": "照花上层小动在强调直处收强已。律增科活表步系越世再参间片准空立。把民观事更小清广日流会千将还求形。热及满一社群斗带白国次历满。几精最什养商内石适儿王存东起术。",
                                    "imageDir": "http://dummyimage.com/200x100/4A7BF7&text=Hello",
                                    "storeId": 914832761,
                                    "amount": 52
                                },
                                "amount": 1000
                            },
                            {
                                "item": {
                                    "itemId": 35616167,
                                    "name": "所公叫前周自",
                                    "price": 58899.94,
                                    "description": "照花上层小动在强调直处收强已。律增科活表步系越世再参间片准空立。把民观事更小清广日流会千将还求形。热及满一社群斗带白国次历满。几精最什养商内石适儿王存东起术。",
                                    "imageDir": "http://dummyimage.com/200x100/4A7BF7&text=Hello",
                                    "storeId": 914832761,
                                    "amount": 52
                                },
                                "amount": 1000
                            },
                            {
                                "item": {
                                    "itemId": 35616167,
                                    "name": "所公叫前周自",
                                    "price": 58899.94,
                                    "description": "照花上层小动在强调直处收强已。律增科活表步系越世再参间片准空立。把民观事更小清广日流会千将还求形。热及满一社群斗带白国次历满。几精最什养商内石适儿王存东起术。",
                                    "imageDir": "http://dummyimage.com/200x100/4A7BF7&text=Hello",
                                    "storeId": 914832761,
                                    "amount": 52
                                },
                                "amount": 1000
                            }
                        ]
                    }
                ]
            }
            var app = new Vue({
                el: '.vue-box',
                data: {
                    sa: sa,
                    p: { // 查询参数
                        id: '',
                        title: '',
                        sortType: 0,
                        pageNo: 1,
                        pageSize: 10,
                    },
                    error:0,
                    dataCount: 0,	// 数据总数
                    dataList: [] // 数据集合
                },
                methods: {
                    getItems: function(data) {
                        console.log(data.order_has_items)
                        var str = '<div>';
                        var no = 0;
                        data.order_has_items.forEach( function (it){
                            str += '<h3>no：' + ++no + '</h3>'
                            str += '<p>itemId：' + it.item.itemId + '</p>';
                            str += '<p>name：' + it.item.name + '</p>';
                            str += '<p>price：' + it.item.price + '</p>';
                            str += '<p>storeId：' + it.item.storeId + '</p>';
                            str += '<p>item.amount：' + it.item.amount + '</p>';
                            str += '<p>数量：' + it.amount + '</p>';
                        })
                        str += '</div>';
                        sa.alert(str);
                    },
                    // 数据刷新
                    f5: function() {
                        // TODO: 获取数据
                        const url = "http://localhost:8080/api/v1/order?userId=900000000";
                        axios.get(url).then(function(response) {
                            // console.log(response);
                            this.dataList = response.data;
                            // console.log(this.dataList);
                            sa.f5TableHeight();		// 刷新表格高度
                        }.bind(this));
                    },
                    updateStatus: function (data) {
                        // TODO: 发送修改请求
                        const url = "http://localhost:8080/api/v1/order";
                        axios({
                            method: 'put',
                            url: url,
                            params: {
                                userId: 900000000,
                                orderId: data.orderId,
                                action:  data.status === 'PAID' ? 21 : 31,
                                    // function() {
                                    // if (data.status === 'PAID') {
                                    //     return 21;
                                    // } else {
                                    //     return 31;
                                    // }
                                status: data.status === 'PAID' ? 1 : 2,
                                //     function() {
                                //     if (data.status === 'PAID') {
                                //         return 1;
                                //     } else {
                                //         return 2;
                                //     }
                                // }
                            }
                    }).then(function(response) {
                            // console.log(response);
                            // this.dataList = response.data;
                            this.f5();
                            // console.log(this.dataList);
                            sa.f5TableHeight();		// 刷新表格高度
                        }.bind(this));
                    }
                },
                created: function() {
                    this.f5();
                    sa.onInputEnter();		// 监听输入框的回车事件，执行查询
                }
            })
        </script>
    </body>
</html>
